<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block th:include="include :: header('选择用户')" />
	<th:block th:include="include :: bootstrap-select-css" />
	<th:block th:include="include :: bootstrap-duallistbox-css" />
</head>

<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form id="user_form" action="#" class="wizard-big">
			<div class="row">
				<div class="select-list">
					<ul>
						<li class="select-selectpicker">
							<label>单位： </label>
							<select id="deptIds" name="deptIds" class="selectpicker" data-none-selected-text="请选择"
								multiple>
								<option th:each="dict : *{depts}" th:value="${dict.deptId}" th:text="${dict.deptName}">
								</option>
							</select>
						</li>
						<li class="select-selectpicker">
							<label>角色： </label>
							<select id="roleIds" name="roleIds" class="selectpicker" data-none-selected-text="请选择"
								multiple>
								<option th:each="dict : *{roles}" th:value="${dict.roleId}" th:text="${dict.roleName}">
								</option>
							</select>
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="searchPre()"><i
									class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i
									class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>
			</div>
		</form>
		<hr>
		<div class="row">
			<select id="userIds" name="userIds" class="form-control dual_select" multiple></select>
		</div>

	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-select-js" />
	<th:block th:include="include :: bootstrap-duallistbox-js" />
	<script type="text/javascript">

		var prefix = ctx + "common";
		var selectedDataStr = [];
		var selectedDataOption = [];

		function initListBox(url, reqeustParams, optionValue, optionText) {
			var selector = initBootstrapDualListbox();
			selectedDataStr = selector.val() != null ? selector.val() : selectedDataStr;
			$.ajax({
				type: 'post',
				url: url,
				data: reqeustParams,
				async: false,
				success: function (res) {
					selector.find("option").remove();
					var objs = res.code == '0' ? res.data : [];
					objs.forEach(item => {
						if (selectedDataStr.indexOf(item[optionValue]) == -1) {
							selector.append('<option value="' + item[optionValue] + '">' + item[optionText] + ' </option>');
						}
					});
					selector.bootstrapDualListbox('refresh');
				},
				error: function (req) {
					$.modal.alertError("系统错误");
				},
			});
		}

		function initBootstrapDualListbox() {
			return $('.dual_select').bootstrapDualListbox({
				nonSelectedListLabel: '可选用户',
				selectedListLabel: '已选用户',
				filterTextClear: '展示所有',
				filterPlaceHolder: '过滤搜索',
				moveSelectedLabel: "添加选择",
				moveAllLabel: '添加所有',
				removeSelectedLabel: "移除选择",
				removeAllLabel: '移除所有',
				infoText: '共{0}个',
				infoTextFiltered: '搜索到{0}个 ,共{1}个',
				infoTextEmpty: '列表为空',
				selectorMinimalHeight: 270,
				moveOnSelect: false,
				showFilterInputs: false,
				preserveSelectionOnMove: 'all',
			});
		}

		function searchPre() {
			var url = prefix + "/activeUserList";
			var reqeustParams = {
				"deptIds": $.common.join($('#deptIds').selectpicker('val')),
				"roleIds": $.common.join($('#roleIds').selectpicker('val')),
			};
			initListBox(url, reqeustParams, "userId", "userName");
		}

		function resetPre() {
			$("#user_form")[0].reset();
			$("#deptIds").selectpicker('refresh');
			$("#roleIds").selectpicker('refresh');
		}

		$(function () {
			searchPre();
		})

		function submitHandler(index, layero) {
			var userIds = $('#userIds').val();
			var total = 0
			var text = ''
			if (null != userIds) {
				total = $.common.getLength(userIds);
				text = $("#userIds").find("option:selected").text();
				if (text.length > 40) {
					text = text.substr(0, 40) + "..."
				}
				parent.$("#userIds").val(userIds)
			}
			parent.$("#releaseScope").val(text)
			parent.$("#total").val(total)
			$.modal.close();
		}
	</script>
</body>

</html>